<template>
	<n-space vertical size="large">
		<n-layout>
			<n-layout-header style="--header-height: 80px">
				<w-header></w-header>
			</n-layout-header>
			<n-layout-content content-style="padding: 24px;" style="--header-height: 80px">
				<n-loading-bar-provider>
					<w-card-list v-if="type === 'list'"></w-card-list>
					<w-edit v-else></w-edit>
				</n-loading-bar-provider>
			</n-layout-content>
		</n-layout>
	</n-space>
</template>
<script setup lang="ts">
	import { ref, provide } from 'vue'

	import { NSpace, NLayout, NLayoutContent, NLayoutHeader, NLoadingBarProvider } from 'naive-ui'
	import WHeader from '@/components/home/Header.vue'
	import WCardList from '@/components/home/CardList.vue'
	import WEdit from '@/components/home/Edit.vue'

	const type = ref('list')
	const cardId = ref('cardId')

	provide('type', type)
	provide('cardId', cardId)
</script>
<style scoped lang="scss">
.n-layout {
	background: url(@/assets/home-bg.gif) no-repeat center center fixed;
	background-size: cover;
	.n-layout-header,
	.n-layout-footer {
		height: var(--header-height);
		background: rgba(128, 128, 128, 0.2);
		padding: 24px;
	}
	
	.n-layout-sider {
		background: rgba(128, 128, 128, 0.3);
	}
	
	.n-layout-content {
		height: calc(100vh - var(--header-height));
		// background: rgba(128, 128, 128, 0.4);
	}
}
</style>
  